<template>
	<view class="search-mall-center">
		<view class="list">
			<view class="list-data" v-if="list && list.length>0">
				<view class="item" @click.stop="goToDetail(item)" v-for="(item,index) in list" :key="index">
					<image class="imgs" :src="item.pic">
					</image>
					<view class="title u-line-1">
						{{item.prodName}}
					</view>
					<view class="price">
						<text style="font-size:28rpx ; color:#FF7D00">￥ {{item.price}}</text>
					</view>
					<view class="time flex_between_center">
						<view class="share u-line-1">
							{{item.shopUser?item.shopUser:''}}
						</view>
					</view>

				</view>
			</view>
			<u-empty marginTop="150" mode="list" textSize="30" iconSize="150" v-else>
			</u-empty>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				val: '',
				list: [],
				pageNo: 1,
				total: 0,
				pageSize: 10
			}
		},
		onLoad(opt) {
			this.val = opt.val
		},
		onShow() {
			this.getGoodsList(1)
		},
		onPullDownRefresh() {
			this.getGoodsList(1)
		},
		onReachBottom() {
			if (this.pageNo * this.pageSize > this.total) {
				uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
			} else {
				this.pageNo++
				this.getGoodsList()
			}

		},
		methods: {
			async getGoodsList(arg) {
				uni.showLoading()
				if (arg == 1) {
					this.pageNo = 1
					this.list = []
					this.total = 0
				}
				let res = await this.$api.getGoodsList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: 1,
					val: this.val //todo 搜索接口
				})
				if (res.success) {
					console.log(res.result.records);
					this.list = [...this.list, ...res.result.records]
					this.total = res.result.total
				} else {
					this.list = []
					this.total = 0
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
		}
	}
</script>

<style lang="scss">
	.search-mall-center {
		width: 100%;
		min-height: 100vh;


		.list {
			box-sizing: border-box;
			width: 100%;
			padding: 24rpx 32rpx;
			min-height: calc(100vh - 180rpx);
			background-color: #f7f8fa;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.list-data {
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					border-radius: 6rpx;
					padding-bottom: 10rpx;
					margin-bottom: 24rpx;
					width: 333rpx;
					background: #FFFFFF;

					.imgs {
						width: 333rpx;
						height: 333rpx;
					}

					.title {
						margin: 0 20rpx;
						height: 72rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #1D2129;
						line-height: 36rpx;

					}

					.price {
						margin: 0 10rpx;
						margin-top: 10rpx;
					}

					.time {
						margin: 0 10rpx;
						margin-top: 10rpx;

						.share {
							width: 132rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #4E5969;
							line-height: 39rpx;
						}

						.buy {
							text-align: center;
							width: 152rpx;
							height: 48rpx;
							background: #276AEE;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 48rpx;
						}
					}
				}
			}
		}

	}
</style>